/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, TextArea, Input, BlobInputList,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps,  useItemInputControl,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import { objNestSet} from "../../common/tool";

interface Props extends InternalItemProps {
    label?: string;
    titles?: any[];
}

//常见模型：承压类的宏观检查 {特别的配置 } ，后的第三个字段标识：是否标题也是手工录入的？ 可支持前缀 pr: '几何尺寸检验', span: 5,u:'mm'
export const item现场施工o = [['资质', {t: '是否具备相应的资质',},],
    ['质量体', {t: '是否建立质量保证体系并有效实施',},],
    ['资格', {t: '人员配备是否齐全并具有相应资格',},],
    ['组织设', {t: '施工组织设计（或无损检测工艺文件）是否符合要求', },],
    ['规定试', {t: '是否按有关规定和标准对管道工程进行各种检验及试验',},],
    ['反馈处', {t: '施工（或检测）中发现的质量问题是否及时反馈和处理',},],
    ['转包', {t: '是否有违法分包、转包管道施工（或检测）项目行为', }],
    ['失职', {t: '是否有其他安全质量管理违法、违规或失职行为',}],
    ['现其1', { }, true],
    ['现其2', { }, true]
];

export const itemA现场施工: string[] = ['现场备注'];
item现场施工o.forEach(([name, title, initIsp], i: number) => {
    itemA现场施工.push(name as string);
});
const 检验结果选=['√','——','×'];
export const 施工情况选=['符合','未发现','符合要求','否','无'];

/**对应OnSiteConstruction
 * */
export const SiteConstruct =
React.forwardRef((
    {children, show, alone = true, redId, nestMd, label, titles}: Props, ref
) => {
    //共用的 “itemA宏观检验” 两个编辑器都会提取字段的。
    const [getInpFilter] = useMeasureInpFilter(null, itemA现场施工,);
    const {inp, setInp} = useItemInputControl({ref});
    let oldPrefic='';
    let oldunit='';

    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text>{label}：</Text>
        { item现场施工o.map(([name,conf,adddesc]: any, i:number) => {
            const {t: title, pr: prefix, span,u:unit}=conf;
            oldPrefic=prefix? prefix:oldPrefic;             //配置可继承性
            oldunit=unit===null? '' : unit? unit:oldunit;
            return (<React.Fragment key={i}>
                <div css={{display: 'flex',flexWrap:'wrap',alignItems:'center'}}>
                    <Text>项目{i+1} - {oldPrefic} {'>'} {title}：</Text>
                    {adddesc && <InputLine  label={`第${i+1}项的,可增加的检验项目的标题`}>
                        <Input value={inp?.[name]?.a || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                               onChange={e => objNestSet(name,'a', e.currentTarget.value||undefined,inp,setInp) }/>
                    </InputLine>
                    }
                    &nbsp;施工单位：
                    <BlobInputList  value={inp?.[name]?.c ||''} datalist={施工情况选}
                                    style={{display: 'inline-flex', width: '12rem'}}  rows={1}
                                    onListChange={v => objNestSet(name,'c', v||undefined,inp,setInp) } />
                    {oldunit}
                    &nbsp;检测机构：
                    <BlobInputList  value={inp?.[name]?.m ||''} datalist={施工情况选}
                                    style={{display: 'inline-flex', width: '12rem'}}  rows={1}
                                    onListChange={v => objNestSet(name,'m', v||undefined,inp,setInp) } />
                </div>
            </React.Fragment>);
        })}
        <hr/>
        注：检验结果栏中，打“√”的表示无问题或者合格的检验项目，打“×”的表示有问题或者不合格的检验项目，填写“/”的表示实际没有的检验项目，“－”的表示无法检验的项目。

        <Text variant="h4">现场备注：</Text>
        <TextArea  value={inp?.现场备注 ||''} rows={8}
                   onChange={e => setInp({ ...inp, 现场备注: e.currentTarget.value||undefined}) } />
    </InspectRecordLayout>;
});

